<template>
  <div class="main-container">
    <HeaderIndex v-bind="headerConfig" @logout="logout">
      <UserAvatar :userInfo="userInfo" :size="60" shape="square" />
      <HeaderSetting></HeaderSetting>
    </HeaderIndex>
    <div class="content">
      <AsideIndex />
      <div class="content-container">
        <el-card class="box-card">
          <router-view></router-view>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import cookies from "@/utils/cookies";
import { nanoid } from "nanoid";
import { Component, Vue } from "vue-property-decorator";
import AsideIndex from "./Aside/index.vue";
import HeaderSetting from "./Header/HeaderSetting.vue";
import HeaderIndex from "./Header/index.vue";
import UserAvatar from "./Header/UserAvatar.vue";
import userApi from "@/api/userApi";
import { UserInfoModule } from "@/store/modules/userInfo";

@Component({
  name: "MainIndex",
  components: {
    HeaderIndex,
    AsideIndex,
    HeaderSetting,
    UserAvatar,
  },
})
export default class MainIndex extends Vue {
  public headerConfig = {
    titleBg: require("@/assets/home/main/header/logo.png"),
    titleCss: {
      width: "300px",
      height: "50px",
    },
    logoTitle: "xxx后台系统",
    // pureText: "XXXX后台系统",
  };
  //退出登录
  logout() {
    this.$router.push("/");
    //清除本地token
    cookies.removeToken();
  }
  created() {
    this.getUserInfo();
  }
  mounted() {}
  //用户头像信息
  public userInfo = {
    id: nanoid(),
    avatar: require("@/assets/home/main/header/logo.png"),
    name: "admin",
    role: "超级管理员",
    phone: "13888888888",
    email: "admin@163.com",
    address: "上海市浦东新区xx路xx号",
    sex: "男",
    birthday: "1990-01-01",
  };

  //获取用户信息
  async getUserInfo() {
    const id = UserInfoModule.userInfo?.id;
    const { data: res } = await userApi.getUserInfo(id);

    if (res.code === 200) {
      // this.userInfo = res.data;
    } else {
      this.$message.error(res.msg);
    }
  }
}
</script>

<style lang="scss" scoped>
.main-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f2f4f6;
  .content {
    flex: 1;
    display: flex;
    width: 100%;
  }
}
.content-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 12px;
  .el-card {
    width: 100%;
    height: 100%;
  }
}
</style>
